<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" align="center">
      <el-form-item label="查询时间" prop="createTime">
        <el-date-picker clearable v-model="queryParams.createTime" type="datetime" format="YYYY-MM-DD HH:00"
          value-format="YYYY-MM-DD HH:00" placeholder="请选择查询时间" popper-class="hour-picker" :teleported="false"
          @change="handleQuery">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col style="text-align: right;">
        <el-button type="warning" plain icon="Download" @click="handleExport"
          :disabled="queryParams.createTime == null ? true : false"
          v-hasPermi="['broadbandwaiting:broadbandwaitingtotal:export']">{{ queryParams.createTime == null ?
      '选择日期后导出数据'
      :
      '导出数据'
          }}</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="broadbandwaitingtotalList" stripe :cell-style="cellStyle" height="550">
      <el-table-column label="单位名称" align="center" prop="dept" width="120" fixed />
      <el-table-column label="待装总计" align="center" prop="uninstallSum" />
      <el-table-column label="用户联系不上" align="center" prop="userLoseContact" width="120" />
      <el-table-column label="用户不装" align="center" prop="userUninstall" />
      <el-table-column label="用户延迟安装" align="center" prop="userDelayedInstall" width="120" />
      <el-table-column label="用户原因合计" align="center" prop="userTotal" width="120" />
      <el-table-column label="用户原因占比(%)" align="center" prop="userPercentage" width="130" />
      <el-table-column label="局方其他原因" align="center" prop="commOffceOther" width="120" />
      <el-table-column label="局方无端口" align="center" prop="commNoPort" width="100" />
      <el-table-column label="局方无配线" align="center" prop="commNoWire" width="100" />
      <el-table-column label="局方无主干" align="center" prop="commNoNetwork" width="100" />
      <el-table-column label="局方新建工程" align="center" prop="commNewProject" width="120" />
      <el-table-column label="局方异网" align="center" prop="commOtherNetwork" />
      <el-table-column label="局方合计" align="center" prop="commTotal" />
      <el-table-column label="局方占比(%)" align="center" prop="commPercentage" width="120" />
      <el-table-column label="局方设备不到位" align="center" prop="noEquipment" width="120" />
      <el-table-column label="局方供货占比(%)" align="center" prop="noEquipmentPercentage" width="150" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />

  </div>
</template>

<script setup name="Broadbandwaitingtotal">
import { listBroadbandwaitingtotal } from "@/api/broadbandwaiting/broadbandwaitingtotal";

const { proxy } = getCurrentInstance();
import { ElMessageBox } from 'element-plus'

const broadbandwaitingtotalList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 29,
    createTime: null,
  },
  rules: {
  }
});

const { queryParams, form, rules } = toRefs(data);
// 根据data返回的每一行的数据判断,再修改这一行的样式
const cellStyle = (data) => {
  if (data.row.dept == "市区总计") {
    return {
      color: "#fff",
      // textAlign: "center",
      background: "#E6A23C",
      // fontWeight: 700
    };
  }
  if (data.row.dept == "郊县总计") {
    return {
      color: "#fff",
      // textAlign: "center",
      background: "#409EFF",
      // fontWeight: 700
    };
  }
  if (data.row.dept == "总计") {
    return {
      color: "#fff",
      // textAlign: "center",
      background: "#67C23A",
      // fontWeight: 700
    };
  }
};

/** 查询宽带待装通报总表列表 */
function getList () {
  loading.value = true;
  listBroadbandwaitingtotal(queryParams.value).then(response => {
    broadbandwaitingtotalList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}


// 表单重置
function reset () {
  form.value = {
    id: null,
    dept: null,
    areaFlag: null,
    userLoseContact: null,
    userUninstall: null,
    userDelayedInstall: null,
    userTotal: null,
    userPercentage: null,
    commOffceOther: null,
    commNoPort: null,
    commNoWire: null,
    commNoNetwork: null,
    commNewProject: null,
    commOtherNetwork: null,
    commTotal: null,
    commPercentage: null,
    noEquipment: null,
    noEquipmentPercentage: null,
    uninstallSum: null,
    createTime: null,
    updateTime: null
  };
  proxy.resetForm("broadbandwaitingtotalRef");
}

/** 搜索按钮操作 */
function handleQuery () {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery () {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 导出按钮操作 */
function handleExport () {
  if (broadbandwaitingtotalList.value.length === 0) {
    ElMessageBox({
      title: '无数据',
      message: h('p', null, [
        h('span', null, queryParams.value.createTime),
        h('i', { style: 'color: red' }, ' 该时间段下没有查到数据, 不支持导出！'),
      ]),
    })
  } else {
    const str = queryParams.value.createTime.toString()
    const queryDate = str.replace(/\D/g, '')
    proxy.download('broadbandwaiting/broadbandwaitingtotal/export', {
      ...queryParams.value
    }, `宽带待装通报总表_${queryDate}.xlsx`)
  }
}

getList();
</script>

<style>
.hour-picker {
  .el-time-spinner__wrapper {
    width: 100% !important;
  }

  .el-scrollbar:nth-of-type(2) {
    display: none !important;
  }
}
</style>
